<template>
  <div>
    <div v-for="(data, index) in dynamiclist" :key="data.id">
      <img :src="data.images" alt="" @click="handleClick(index)" />
      <p>{{ data.content }}</p>
      <p>{{ data.time }}</p>
    </div>
    <ul>
      <li style="font-size: 17px"><span></span> 资料</li>
      <li>身高: &nbsp;{{ teachinfo.height }}CM</li>
      <li>星族: &nbsp; {{ teachinfo.constell }}</li>
      <li>职业: &nbsp; {{ teachinfo.work }}</li>
      <li>魅力部位: &nbsp; {{ teachinfo.organ }}</li>
      <li>个性标签: &nbsp; {{ teachinfo.tag }}</li>
      <li>兴趣爱好: &nbsp; {{ teachinfo.like }}</li>
    </ul>
  </div>
</template>
<script>
import getJson from '../../directive/getjson'
import { ImagePreview } from 'vant'

export default {
  data () {
    return {
      teachinfo: [],
      dynamiclist: [],
      id: 0,
      photos: []
    }
  },
  comments: {
    getJson
  },
  methods: {
    handleClick (index) {
      ImagePreview({
        images: this.photos,
        startPosition: index
      })
    }
  },
  mounted () {
    this.id = location.href.match(/id=(\d+)/)[1]

    getJson(
      `https://yapi.tuwan.com/Content/getContentApi/?id=${this.id}&callback=_jsonpda6n1ssnw3b`,
      res => {
        // console.log(res) // this.datalist = res this.dyarr = res.dyarr //
        this.teachinfo = res.teachinfo
        // console.log(res.dynamiclist.data)
        this.dynamiclist = res.dynamiclist.data
        this.photos = res.dynamiclist.data.map(item => item.images)
        // console.log(this.dynamiclist);
      }
    )
  }
}
</script>
<style lang="scss" scoped>
div {
  margin-bottom: 8px;
  img {
    width: 100%;
  }
  p {
    padding: 0 0 0 10px;
    font-size: 12px;
    color: #888;
    line-height: 16px;
    background: #fff;
  }
}
ul {
  width: 100%;
  background: #fff;
  color: #777;
  li {
    text-indent: 14px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    span {
      padding: 0 4px;
      border-left: 4px solid #f60;
    }
  }
}
</style>
